<template>
    <div id="home">

        <div class="container">
            <div class="swipers">
                <div class="swiperNavs">
                    <div class="swiperNav">
                        <h3>JavaScript</h3>
                        <span>
                            <a href="#">JavaScript</a>
                            <a href="#">JavaScript</a>
                            <a href="#">JavaScript</a>
                        </span>
                    </div>
                    <div class="swiperNav">
                        <h3>Python</h3>
                        <span>
                            <a href="#">Python</a>
                            <a href="#">Python</a>
                            <a href="#">Python</a>
                        </span>
                    </div>
                    <div class="swiperNav">
                        <h3>Web前端</h3>
                        <span>
                            <a href="#">Web前端</a>
                            <a href="#">Web前端</a>
                            <a href="#">Web前端</a>
                        </span>
                    </div>
                    <div class="swiperNav">
                        <h3>UI设计</h3>
                        <span>
                            <a href="#">UI设计</a>
                            <a href="#">UI设计</a>
                            <a href="#">UI设计</a>
                        </span>
                    </div>
                </div>
                <div class="swiper">
                    <el-carousel class="bigSwiper" indicator-position="none" height="368px" :interval="5000">
                        <el-carousel-item>
                            <el-image :src="require('@/assets/img/home/轮播1.png')" fit="cover"></el-image>
                        </el-carousel-item>
                        <el-carousel-item>
                            <el-image :src="require('@/assets/img/home/轮播1.png')" fit="cover"></el-image>
                        </el-carousel-item>
                        <el-carousel-item>
                            <el-image :src="require('@/assets/img/home/轮播1.png')" fit="cover"></el-image>
                        </el-carousel-item>
                    </el-carousel>

                    <el-carousel class="minSwiper" indicator-position="none" height="190px" :interval="5000">
                        <el-carousel-item>
                            <el-image :src="require('@/assets/img/home/轮播1.png')" fit="cover"></el-image>
                        </el-carousel-item>
                        <el-carousel-item>
                            <el-image :src="require('@/assets/img/home/轮播1.png')" fit="cover"></el-image>
                        </el-carousel-item>
                        <el-carousel-item>
                            <el-image :src="require('@/assets/img/home/轮播1.png')" fit="cover"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>

        <div class="container">
            <!-- 项目学习 -->
            <div class="studyPj">
                <!-- 控制栏 -->
                <div class="contrl">
                    <div class="contrlImg">
                        <el-image :src="require('@/assets/img/home/decorate.png')" fit="cover"></el-image>
                    </div>
                    <div class="contrlTitle">项目学习</div>
                    <div :class="[isSelectPj ? 'chooseTagActive' : 'chooseTag']" @click="chooseSelect">精选项目</div>
                    <div :class="[isNewPj ? 'chooseTagActive' : 'chooseTag']" @click="chooseNew">最新项目</div>
                    <div :class="[isMyPj ? 'chooseTagActive' : 'chooseTag']" @click="chooseMy">我的项目</div>
                    <div class="more">更多&gt;</div>
                </div>

                <!-- 内容栏 -->
                <div class="contents" v-if="isSelectPj">
                    <div class="content" v-for="item of 8" @click="goStudy">
                        <!-- 角标 -->
                        <div class="contentSign">
                            精选
                        </div>

                        <div class="contentImg">
                            <el-image :src="require('@/assets/img/home/轮播1.png')" style="height: 100%;"></el-image>
                        </div>
                        <div class="contentTxt">
                            <div class="contentTxtTitle">十个Python实用小技巧</div>
                            <div class="contentTxtExplain">办公自动化，小爬虫，数据分析，Python</div>
                            <div class="contentTxtUp">
                                <!-- 浏览量 -->
                                <div class="watchNum">
                                    <span><i class="el-icon-view"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 收藏量 -->
                                <div class="collectNum">
                                    <span><i class="el-icon-star-off"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 点赞量 -->
                                <div class="planNum">
                                    <span><i class="el-icon-document-checked"></i></span>
                                    <span>100</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 内容栏 -->
                <div class="contents" v-if="isNewPj">
                    <div class="content" v-for="item of 8">
                        <!-- 角标 -->
                        <div class="contentSign" style="background-color: #c57dff;">
                            最新
                        </div>

                        <div class="contentImg">
                            <el-image :src="require('@/assets/img/home/轮播1.png')" style="height: 100%;"></el-image>
                        </div>
                        <div class="contentTxt">
                            <div class="contentTxtTitle">十个Python实用小技巧</div>
                            <div class="contentTxtExplain">办公自动化，小爬虫，数据分析，Python</div>
                            <div class="contentTxtUp">
                                <!-- 浏览量 -->
                                <div class="watchNum">
                                    <span><i class="el-icon-view"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 收藏量 -->
                                <div class="collectNum">
                                    <span><i class="el-icon-star-off"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 点赞量 -->
                                <div class="planNum">
                                    <span><i class="el-icon-document-checked"></i></span>
                                    <span>100</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 内容栏 -->
                <div class="contents" v-if="isMyPj">
                    <div class="content" v-for="item of 8">
                        <!-- 角标 -->
                        <div class="contentSign" style="background-color: #ff9419;">
                            我的
                        </div>

                        <div class="contentImg">
                            <el-image :src="require('@/assets/img/home/轮播1.png')" style="height: 100%;"></el-image>
                        </div>
                        <div class="contentTxt">
                            <div class="contentTxtTitle">十个Python实用小技巧</div>
                            <div class="contentTxtExplain">办公自动化，小爬虫，数据分析，Python</div>
                            <div class="contentTxtUp">
                                <!-- 浏览量 -->
                                <div class="watchNum">
                                    <span><i class="el-icon-view"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 收藏量 -->
                                <div class="collectNum">
                                    <span><i class="el-icon-star-off"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 点赞量 -->
                                <div class="planNum">
                                    <span><i class="el-icon-document-checked"></i></span>
                                    <span>100</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- wiki知识库 -->
        <div class="container" style="background-color: #fff;margin-bottom: 3rem;">
            <div class="wiki">
                <!-- 控制栏 -->
                <div class="contrl">
                    <div class="contrlImg">
                        <el-image :src="require('@/assets/img/home/decorate.png')" fit="cover"></el-image>
                    </div>
                    <div class="contrlTitle">wiki知识库</div>
                    <div :class="[isRecommendWiki ? 'chooseTagActive' : 'chooseTag']" @click="chooseRWiki">推荐wiki</div>
                    <div :class="[ismywiki ? 'chooseTagActive' : 'chooseTag']" @click="chooseMyWiki">我的wiki</div>
                    <div class="more">更多&gt;</div>
                </div>

                <!-- 卡片 -->
                <div class="wikicards">
                    <div class="wikicard" v-for="item of 4" :key="item">
                        <!-- 头图 -->
                        <div class="wikicardImg">
                            <el-image style="height: 100%" :src="require('@/assets/img/home/wiki图片.png')"></el-image>
                        </div>
                        <!-- 内容 -->
                        <div class="wikicardContent">
                            <div class="wikicardContentTitle">
                                <span style="margin-right: 10px;">
                                    <el-tag>设计教程</el-tag>
                                </span>
                                <span>新手自学UI设计，这几点你必须要清楚的！</span>
                            </div>
                            <div class="wikicardContentContent">
                                UI只是一个简称，全称是User Interface 即用户界面设计，指的是对于所有软件的界面美
                                观操作逻辑、机...
                            </div>
                            <div class="wikicardContentUp">
                                <!-- 浏览量 -->
                                <div class="watchNum">
                                    <span><i class="el-icon-view"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 收藏量 -->
                                <div class="collectNum">
                                    <span><i class="el-icon-star-off"></i></span>
                                    <span>100</span>
                                </div>
                                <!-- 点赞量 -->
                                <div class="planNum">
                                    <span><i class="el-icon-document-checked"></i></span>
                                    <span>100</span>
                                </div>
                            </div>
                        </div>
                        <!-- 操作 -->
                        <div class="wikicardOperation">
                            <div class="seeBtn">
                                <el-button icon="el-icon-view" type="primary" @click="gowiki">查看</el-button>
                            </div>
                            <div class="collectBtn">
                                <el-button icon="el-icon-star-off">收藏</el-button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- wiki练习库 -->
        <div class="container" style="margin-bottom: 3rem;">
            <div class="wikiPractice">
                <!-- 控制栏 -->
                <div class="contrl">
                    <div class="contrlImg">
                        <el-image :src="require('@/assets/img/home/decorate.png')" fit="cover"></el-image>
                    </div>
                    <div class="contrlTitle">wiki练习库</div>
                    <div :class="[isRPractices ? 'chooseTagActive' : 'chooseTag']" @click="chooseRPractices">热门练习</div>
                    <div :class="[isMyPractices ? 'chooseTagActive' : 'chooseTag']" @click="chooseMyPractices">我的练习
                    </div>
                    <div class="more">更多&gt;</div>
                </div>

                <!-- 内容 -->
                <div class="wikiPractices">
                    <div class="practice" v-for="(item,index) of 10" :key="index" @mouseover="practiceEnter(index)" @mouseleave="practiceOut(index)">
                        <div class="practiceImg">
                            <el-image style="width: 100%;height: 100%;" :src="require('@/assets/img/home/练习.png')"></el-image>
                        </div>
                        <div class="practiceMsg">
                            <div class="practiceTitle">Python基础一阶段基础练习</div>
                            <div class="practiceType">练习类型： 在线测评</div>
                            <div class="practiceNum">参与人数： 122</div>
                        </div>
                        <div class="moudle">
                            <div class="moudleSign"><i class="el-icon-star-off"></i></div>
                            <div class="moudleBtn"><el-button type="primary" @click="goPractice">参与练习</el-button></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 精选项目
                isSelectPj: true,
                // 最新项目
                isNewPj: false,
                // 我的项目
                isMyPj: false,

                // 推荐Wiki
                isRecommendWiki: true,
                // 我的Wiki
                ismywiki: false,

                // 热门练习
                isRPractices: true,
                // 我的练习
                isMyPractices: false,
            }
        },
        methods: {
            // 精选项目
            chooseSelect() {
                this.isSelectPj = true
                this.isNewPj = false
                this.isMyPj = false
            },
            // 最新项目
            chooseNew() {
                this.isSelectPj = false
                this.isNewPj = true
                this.isMyPj = false
            },
            // 我的项目
            chooseMy() {
                this.isSelectPj = false
                this.isNewPj = false
                this.isMyPj = true
            },
            // 我的Wiki
            chooseMyWiki() {
                this.isRecommendWiki = false
                this.ismywiki = true
            },
            // 推荐Wiki
            chooseRWiki() {
                this.isRecommendWiki = true
                this.ismywiki = false
            },
            // 热门练习
            chooseRPractices() {
                this.isRPractices = true
                this.isMyPractices = false
            },
            // 我的练习
            chooseMyPractices() {
                this.isRPractices = false
                this.isMyPractices = true
            },
            // 鼠标移入
            practiceEnter(index){
                document.querySelectorAll('.moudle')[index].style.display = 'flex'
            },
            // 鼠标移出
            practiceOut(index){
                document.querySelectorAll('.moudle')[index].style.display = 'none'
            },
            // 跳转项目学习页面
            goStudy(){
                this.$router.push('/studyPage')
            },
            gowiki(){
                this.$router.push('/wikiDetails')
            },
            goPractice(){
                this.$router.push('/practiceIntroduce')
            },
        },
    }
</script>

<style lang="scss" scoped>
    @import '@/assets/css/home/home.scss';
</style>
